<template>
    <el-card class="box-card" width="100%">
  <div slot="header" class="clearfix">
    <span>模型创建</span>
    <el-button style="float: right; padding: 1px 0; height: 35px; width: 55px" type="primary" @click="goBack()">返回</el-button>
  </div>
  <div class="forms">
    <el-form ref="detailData" :rules="rules" :model="detailData" label-width="100px" class="model-form">
      <el-form-item label="模型名称：" prop="model_name">
        <el-input v-model="detailData.model_name"></el-input>
      </el-form-item>
      <!-- <el-form-item label="模型类型：" prop="model_type">
        <el-select v-model="detailData.model_type" placeholder="请选择类型">
          <el-option
          v-for="item in modelType"
          :key="item.type"
          :label="item.name"
          :value="item.type">
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="模型文件名：" prop="model_file_name">
        <el-input v-model="detailData.model_file_name" :disabled="detailData.model_type=='py'" v-show="detailData.model_type=='py'"></el-input>
      </el-form-item> -->
      <el-form-item label="模型类名：" prop="model_class">
        <el-input v-model="detailData.model_class"></el-input>
      </el-form-item>
      <el-form-item label="模型依赖：" prop="dependencies">
        <el-input v-model="detailData.dependencies"></el-input>
      </el-form-item>
      <el-form-item label="是否公有：" prop="public">
        <el-switch
          v-model="detailData.public"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="是"
          inactive-text="否"
          :active-value=1
          :inactive-value=0>
        </el-switch>
      </el-form-item>
      <el-form-item label="模型文件：" prop="path">
          <el-upload
      class="upload-demo"
      action="string"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :limit="1"
      :on-change="handleChange"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :file-list="fileList"
      :auto-upload="false">
      <el-button size="small" type="primary">选择文件</el-button>
      <div slot="tip" class="el-upload__tip">上传模型文件</div>
      </el-upload>
        <!-- <el-input v-model="detailData.path"></el-input> -->
      </el-form-item>
      <el-form-item label="模型描述：" prop="description">
        <el-input v-model="detailData.description" type="textarea" :rows="5" maxlength=500></el-input>
      </el-form-item>
      <el-form-item label="签入信息：" prop="commit_message">
        <el-input v-model="detailData.commit_message"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createModelProcess()">提交</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据集id: {{detailData.id}} -->
  </div>
  <!-- <div class="text item">
    数据集名称： {{detailData.name}}
  </div>
  <div class="text item">
    创建者： {{detailData.user_id}}
  </div>
  <div class="text item">
    创建时间： {{detailData.create_date}}
  </div>
  <div class="text item">
    是否公有： {{detailData.public}}
  </div>
  <div class="text item">
    描述： {{detailData.description}}
  </div> -->
</el-card>
</template>
<style scoped>
  .forms {
    font-size: 16px;
    text-align: left;
    margin-left: 1px;
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .el-card__header {
    padding: 18px 20px;
    background-color: rgb(238, 241, 246);
  }

  .model-form {
    width: 90%;
    margin: 10px; /* 上下间距160px，左右自动居中*/
    background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
    padding: 10px;
    border-radius: 20px; /* 圆角 */
  }
</style>
<script>
import { createModel } from '@/api/request/model'
// import store from '@/store/store'
export default {
//   props: ['title'],
  data () {
    return {
      detailData: {
        public: 0,
        dependencies: '',
        description: '',
        model_name: '',
        filebytes: '',
        model_class: '',
        model_type: null,
        model_file_name: ''
      },
      modelType: [{
        name: 'python文件',
        type: 'py'
      }],
      //   {
      //     name: 'zip压缩包',
      //     type: 'zip'
      //   }],
      fileList: []
    //   title: '我创建的数据集'
    }
  },
  methods: {
    update () {
    //   getDataset(store.datasetInfo.curID).then(response => {
    //     this.detailData = response
    //   })
    //   this.detailData = null
    },
    goBack () {
      this.clear()
      this.$router.go(-1)
    },
    createModelProcess () {
      let formData = new FormData()
      formData.append('model_name', this.detailData.model_name)
      formData.append('model_class', this.detailData.model_class)
      formData.append('model_type', 'py')
      formData.append('model_file_name', '')
      // if (this.detailData.model_type !== 'py') {
      //   formData.append('model_file_name', this.detailData.model_file_name)
      // } else {
      //   formData.append('model_file_name', '')
      // }
      formData.append('dependencies', this.detailData.dependencies)
      formData.append('description', this.detailData.description)
      formData.append('public', this.detailData.public)
      //   var file = new Blob(['dddd'])
      formData.append('filebytes', this.fileList[0].raw, 'filebytes')
      formData.append('commit_message', this.detailData.commit_message)
      createModel(formData).then(response => {
        this.clear()
        this.$router.go(-1)
      })
    },
    handleSuccess (response, file, fileList) {
      let reader = new FileReader()
      reader.readAsBinaryString(file.raw)
      reader.onload = e => {
        this.detailData.filebytes = e.target.result
      }
    },
    handleChange (file, fileList) {
      this.fileList = fileList
    },
    clear () {
      this.detailData.model_class = ''
      // this.detailData.model_type = 'py'
      this.detailData.dependencies = ''
      this.detailData.model_name = ''
      this.detailData.filebytes = null
      this.detailData.description = ''
      this.detailData.commit_message = ''
      // this.detailData.model_file_name = ''
    }
  },
  activated () {
    this.update()
  }
}
</script>
